<template>
  <div class="select">
    <Select show-search v-model:value="selectValue" style="width: 100%" :placeholder="placeholder" :options="options"
      :filter-option="filterOption" :fieldNames="fieldNames" :allowClear="allowClear" :mode="mode" :size="size"
      :max-tag-count="1" @change="handleChange"></Select>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import { defHttp } from '@/utils/http/axios';
import { Select } from 'ant-design-vue';
export default defineComponent({
  name: 'rw_select',
  components: { Select },
  props: {
    code: {
      type: String,
      default: 'org',
    },
    size: {
      type: String,
      default: 'small',
    },
    placeholder: {
      type: String,
      default: '请选择',
    },
    value: {
      type: String,
      default: '',
    },
    label: {
      type: String,
      default: 'typeName',
    },
    codevalue: {
      type: String,
      default: 'typeCode',
    },
    allowClear: {
      type: Boolean,
      default: true,
    },
    defaultValue: {
      type: Boolean,
      default: false,
    },
    addOption: {
      type: Array,
      default: () => [],
    },
    mode: {
      type: String,
      default: 'Middle',
    },
    afterEcah: {
      type: Function,
    },
  },
  setup(props, context) {
    let {
      code,
      label,
      defaultValue,
      codevalue,
      value,
      allowClear,
      addOption,
      mode,
      afterEcah,
      placeholder,
      size,
    } = props;
    // value = mode === 'multiple' ? [] : '';
    // const selectValue = ref<string | number | undefined | string[]>(
    //   mode === 'multiple' ? [value] : value,
    // );
    const selectValue = ref<string | number | undefined | Array<string>>();
    const options = ref([]);
    const fieldNames = {
      label,
      value: codevalue,
    };
    watch(
      () => props.value,
      (n) => {

        // if (n instanceof Array || mode === 'multiple') {
        //   n = !n[0] ? [] : n;
        //   // n = mode === 'multiple' ? n : n;
        //   selectValue.value = n;
        // } else if (n) {
        //   selectValue.value = n + '';
        // } else {
        //   selectValue.value = ' ';
        // }
        if (n instanceof Array) {
          selectValue.value = n;
        } else if (mode === 'multiple' && !n) {
          selectValue.value = [];
        } else if (n) {
          selectValue.value = n;
        } else {
          selectValue.value = undefined;
        }
      },
    );

    const handleChange = (value) => {
      context.emit('input', value);
      context.emit('change', value);
    };

    // 根据type不同调用不同的接口
    const getselectList = () => {
      let url = `key-values/Select/${code}`;
      defHttp
        .get({ url })
        .then((res) => {
          options.value = res.data.map((item) => {
            return {
              ...item,
            };
          });
          if (typeof afterEcah == 'function') {
            options.value = afterEcah(options.value);
          }
          context.emit('loadList', options.value);
          if (defaultValue && res.data.length > 0 && !value) {
            selectValue.value = res.data[0][codevalue];
            context.emit('change', selectValue.value);
          }
        })
        .finally(() => {
          options.value.push(...addOption);
        });
    };
    const filterOption = (input: string, option: any) => {
      let name = option[label];
      return name.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    };
    if (mode === 'multiple') {
      selectValue.value = props.value || []
    } else {
      selectValue.value = props.value || undefined
    }

    getselectList();
    return {
      selectValue,
      fieldNames,
      options,
      allowClear,
      mode,
      size,
      handleChange,
      filterOption,
      placeholder
    };
  },
});
</script>
